@charset "utf-8";
@font-face {
	font-family: BariolRegular;
	src: url("../font/BariolRegular.ttf");
}


/* =通用样式
-----------------------------------------------------------------------------*/

body,
h1,
h2,
p {
	margin: 0;
}

html {
	font-size: 100px;
}

body {
	font-size: .16rem;
	font-family: BariolRegular, PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
	color: #333;
	min-width: 320px;
}

a {
	text-decoration: none;
	color: #333;
}

a:hover {
	text-decoration: underline;
}

main {
	display: block;
}


/* =基础样式
-----------------------------------------------------------------------------*/


/* 主要导航模块样式 */

.main-nav {
	height: .48rem;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.9);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: fixed;
	font-weight: bold;
	z-index: 1;
	opacity: 0;
	transition: opacity 1.5s;
}

.main-nav a {
	margin-right: .16rem;
}


/* 横幅模块样式 */

.banner {
	width: 100%;
	height: 5.68rem;
	background-image: url(../img/banner.png);
	background-size: cover;
	background-position: 50% 50%;
}

@media (min-width: 768px) {
	.banner {
		height: 6.4rem;
	}
}

@media (min-width: 1024px) {
	.banner {
		height: 8rem;
	}
}


/* 关于模块样式 */

.about {
	width: 100%;
	height: 2.4rem;
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	.about {
		height: 4.8rem;
	}
}

@media (min-width: 1024px) {
	.about {
		height: 8rem;
	}
}

.about__title,
.about__intro {
	text-align: center;
	text-decoration: underline;
	margin-top: .1rem;
	position: relative;
	top: .5rem;
	transition: top 1.5s ease;
}

@media (min-width: 768px) {
	.about__title,
	.about__intro {
		font-size: .32rem;
	}
}

@media (min-width: 1024px) {
	.about__title,
	.about__intro {
		font-size: .64rem;
	}
}


/* 关于模块背景样式 */

.about {
	background: url(../img/hill/hill1.png) 1% 120% / 25% no-repeat, url(../img/hill/hill2.png) 50% 105% / 10% no-repeat, url(../img/hill/hill3.png) 99% 120% / 20% no-repeat;
	opacity: 0;
	transition-property: background-position-y, opacity;
	transition-duration: 1.5s;
	transition-timing-function: ease;
	overflow: hidden;
}

@media (min-width: 768px) {
	.about {
		background-position-y: 150%, 110%, 140%;
	}
}

@media (min-width: 1024px) {
	.about {
		background-position-y: 140%, 105%, 120%;
		background-size: 20%, 5%, 15%;
	}
}


/* 漂浮模块样式 */

.about__float-word {
	flex-grow: 1;
	display: flex;
	align-items: flex-end;
	-webkit-animation: infinite float-word 10s linear;
	animation: infinite float-word 10s linear;
	position: relative;
	left: -100%;
	height: 100%;
}

@media (min-width: 768px) {
	.about__float-word {
		-webkit-animation-duration: 15s;
		animation-duration: 15s;
	}
}

@media (min-width: 1024px) {
	.about__float-word {
		-webkit-animation-duration: 25s;
		animation-duration: 25s;
	}
}

@-webkit-keyframes float-word {
	from {
		left: -100%;
	}
	to {
		left: 100%;
	}
}

@keyframes float-word {
	from {
		left: -100%;
	}
	to {
		left: 100%;
	}
}

.about__float-word__word {
	flex-grow: 1;
	text-align: center;
	/*color: #ccc;*/
}

.about__float-word__word:nth-child(1) {
	height: 40%;
	font-size: .26rem;
}

.about__float-word__word:nth-child(2) {
	height: 60%;
	font-size: .18rem;
}

.about__float-word__word:nth-child(3) {
	height: 45%;
	font-size: .20rem;
}

.about__float-word__word:nth-child(4) {
	height: 50%;
	font-size: .22rem;
}

@media (min-width: 768px) {
	.about__float-word__word:nth-child(1) {
		font-size: .35rem;
	}
	.about__float-word__word:nth-child(2) {
		font-size: .28rem;
	}
	.about__float-word__word:nth-child(3) {
		font-size: .30rem;
	}
	.about__float-word__word:nth-child(4) {
		font-size: .32rem;
	}
}

@media (min-width: 1024px) {
	.about__float-word__word:nth-child(1) {
		font-size: .6rem;
	}
	.about__float-word__word:nth-child(2) {
		font-size: .4rem;
	}
	.about__float-word__word:nth-child(3) {
		font-size: .45rem;
	}
	.about__float-word__word:nth-child(4) {
		font-size: .5rem;
	}
}


/* =知识介绍模版样式
-----------------------------------------------------------------------------*/

.knowledge-intor__title,
.department__title {
	text-align: center;
	line-height: 1.8em;
}

@media (min-width: 768px) {
	.knowledge-intor__title,
	.department__title {
		font-size: .6rem;
	}
}

@media (min-width: 1024px) {
	.knowledge-intor__title,
	.department__title {
		font-size: .7rem;
	}
}

.knowledge-intor__section {
	display: flex;
	align-items: center;
	flex-direction: row;
	height: 1.8rem;
	border-bottom: 1px solid #ccc;
	background-position-x: 100%;
	background-position-y: 50%;
	background-size: 32%;
	background-repeat: no-repeat;
}

.department_branch {
	height: 1.8rem;
}

@media (min-width: 768px) {
	.knowledge-intor__section,
	.department_branch {
		height: 3.6rem;
	}
}

@media (min-width: 1024px) {
	.knowledge-intor__section,
	.department_branch {
		height: 5.4rem;
	}
}

.knowledge-intor__section:nth-child(odd) {
	flex-direction: row-reverse;
	background-position-x: 0%;
}

.bacground-ui {
	background-image: url(../img/knowledge/ui.svg);
}

.bacground-web-front {
	background-image: url(../img/knowledge/web-front.svg);
}

.bacground-web-rear {
	background-image: url(../img/knowledge/web-rear.svg);
}

.bacground-network {
	background-image: url(../img/knowledge/network.svg);
}

.bacground-mobile {
	background-image: url(../img/knowledge/mobile.svg);
}

.knowledge-intor__section__id {
	width: 10%;
	height: 70%;
	background-color: #3FA9F5;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: .2rem;
	text-shadow: 2px 2px 2px #333;
}

@media (min-width: 768px) {
	.knowledge-intor__section__id {
		font-size: .6rem;
	}
}

@media (min-width: 1024px) {
	.knowledge-intor__section__id {
		font-size: .7rem;
	}
}

.knowledge-intor__section__describe {
	width: 55%;
	margin: 0 .1rem;
}

@media (min-width: 768px) {
	.knowledge-intor__section__describe {
		margin: 0 .3rem;
	}
}

@media (min-width: 1024px) {
	.knowledge-intor__section__describe {
		margin: 0 .5rem;
	}
}

.knowledge-intor__section:nth-child(odd) h2 {
	text-align: right;
}

.knowledge-intor__section__describe h2 span {
	color: #3FA9F5;
}

.knowledge-intor__section__describe P {
	margin-top: .2rem;
	font-size: .12rem;
	color: #AFAFAF;
	text-align: justify;
}

@media (min-width: 768px) {
	.knowledge-intor__section h2 {
		font-size: .60rem;
	}
	.knowledge-intor__section__describe P {
		font-size: .24rem;
	}
}

@media (min-width: 1024px) {
	.knowledge-intor__section h2 {
		font-size: .70rem;
	}
	.knowledge-intor__section__describe P {
		font-size: .32rem;
	}
}


/* 帘子效果 */

.curtain {
	width: 100%;
	height: 100%;
	position: relative;
}


/* =部门介绍模块样式
-----------------------------------------------------------------------------*/

.department a {
	display: flex;
	border-bottom: 1px solid #ccc;
	/*background-color: #3FA9F5;*/
	background-color: #FAFAFA;
	/*color: rgba(255, 255, 255, 0);*/
	align-items: center;
	justify-content: center;
	font-size: .3rem;
}

.department_branch {
	background-size: cover;
	background-position: 50% 50%;
	color: rgba(0, 0, 0, 0);
}


/* 部门模块背景样式 */

.department_branch--gongGuan {
	background-image: url(../img/department/gong-guan.png);
}

.department_branch--shiYe {
	background-image: url(../img/department/shi-ye.png);
}

.department_branch--zuZhi {
	background-image: url(../img/department/zu-zhi.png);
}

.department_branch--neiWu {
	background-image: url(../img/department/nei-wu.png);
}

.department_branch--kaiFa {
	background-image: url(../img/department/kai-fa.png);
}


/* ＝页脚模块样式
-----------------------------------------------------------------------------*/

.main-footer {
	background-color: #444547;
	color: #ccc;
	height: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .12rem;
}

.main-footer p {
	text-align: center;
	display: inline-block;
}

.main-footer a {
	color: #ccc;
}